<template>
	<view class="content-box">
		<view class="title">
			文字描述
		</view>
		<view class="textarea">
			<u--textarea v-model="value" placeholder="请输入内容" count :maxlength="maxlength" height="150"></u--textarea>
		</view>
		<block v-if="type!=='signature'">

			<view class="title">
				上传高清照片
			</view>
			<view style="padding: 30rpx 20rpx;">
				<u-upload :fileList="filepic" @afterRead="afterRead" @delete="deletePic" name="pic" :maxCount="6"
					width="220rpx" height="220rpx">
					<image src="/static/upImg.png" mode="widthFix" style="width: 220rpx;height: 220rpx;"></image>
				</u-upload>
			</view>
		</block>
		<view class="btn" @click="submit">
			保存
		</view>
	</view>
</template>

<script>
	let name = {
		hotel: {
			text: "petHotel",
			pic: "petHotelImages"
		},
		rearingExperience: {
			text: "petRearingExperience",
			pic: "petRearingExperienceImages"
		},
		story: {
			text: "petStory",
			pic: "petStoryImages"
		},
		signature: {
			text: "signature",
			pic: "signatureImages"
		}
	}
	export default {
		data() {
			return {
				value: '',
				filepic: [],
				type: 'hotel',
				maxlength:1000
			}
		},
		onLoad(e) {
			this.type = e.type
			this.maxlength=e.type!=='signature'?1000:30
			uni.setNavigationBarTitle({
				title: e.type === 'hotel' ? '推荐宠物友好酒店' : e.type === 'rearingExperience' ? '养宠经验' : e.type ===
					'signature' ? '个性签名' : '宠物故事'
			})
			this.$myRequest('/api/driver/mine/v1/driver/details').then(res => {
				this.value = res.data[name[this.type].text]
				if (res.data[name[this.type].pic]) {
					let pic = res.data[name[this.type].pic].split(',')
					pic.forEach(item => {
						this.filepic.push({
							status: 'success',
							url: item,
							thumb: this.$imageUrl(item)
						})
					})
				}

			})
		},
		methods: {
			// 删除图片
			deletePic(event) {
				this[`file${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式  
				let lists = [].concat(event.file)
				let fileListLen = this[`file${event.name}`].length
				lists.map((item) => {
					this[`file${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})

				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url, event.name)
					let item = this[`file${event.name}`][fileListLen]
					this[`file${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result.data
					}))
					fileListLen++
				}
			},

			uploadFilePromise(url, name) {
				let that = this
				return this.$uploadFiles({
					filePath: url,
					formData: {
						type: 1
					}
				})

			},
			submit() {
				let pic = []
				this.filepic.forEach(item => {
					pic.push(item.url)
				})
				let data = {
					[name[this.type].text]: this.value,
					[name[this.type].pic]: pic.join(',')
				}
				this.$myRequest('/api/driver/mine/v1/update/driverInfo', data, 'POST').then(res => {
					uni.navigateBack({
						delta: 1
					})
				})
			},
		}
	}
</script>

<style lang="scss">
	.content-box {
		.title {
			font-size: 28rpx;
			color: #333333;
			font-weight: 700;
			position: relative;
			padding-left: 20rpx;

			&:before {
				content: '';
				width: 12rpx;
				height: 24rpx;
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				background: $theme-color;
			}
		}

		.textarea {
			margin: 20rpx;
			border-radius: 20rpx;
			overflow: hidden;
			border: 2rpx dashed #D6D6D6;
		}

		.btn {
			width: 338rpx;
			height: 80rpx;
			background: $theme-color;
			border-radius: 40rpx;
			text-align: center;
			font-size: 28rpx;
			line-height: 80rpx;
			color: #FFFFFF;
			margin: 300rpx auto 0 auto;
		}
	}
</style>